import React from 'react';
import { connect } from 'react-redux';
import { Tooltip, message } from 'antd';
import List from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import AuditStatus from '../../../components/AuditStatus';
import CodeLabel from '../../../components/CodeLabel';
import AuditAdd from './add';
import services from '../../../services/api';
import Modal from '../../../components/Modal';
import storage from '../../../utils/storage';

// 3倒叙 4升序 默认为倒叙
const ORDER_OPTION = {
  ascend: 4,
  descend: 3,
};

function mapStateToProps(state) {
  return {
    module_type: state.code.module_type || [],
    audit_status: state.code.audit_status || [],
    func_usage_scope_limit: state.code.func_usage_scope_limit || [],
    field_classification: state.code.field_classification || []
  };
}

@connect(mapStateToProps)
class AuditLog extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'audit';
    this.editComponent = AuditAdd;
    this.listsComponent = List;
    this.state = {
      ...this.state,
      // riskTypes: [],
      // columns: [],
      // dataIndex: 'strategy_type',
      // selectedRowKeys: [],
    };
  }
  componentDidMount() {}

  按提交时间排序
  handleTableChange = (_, __, sorter) => {
    const { order } = sorter;
    const order_by = {
      filed: 'update_time',
      sort: ORDER_OPTION[order] || ORDER_OPTION.descend,
    };
    this.queryTableParams = { ...this.queryTableParams, order_by };
    this.freshQueryList();
  };

  // 列表
  queryList(params) {
    services[this.api].auditList(params).then((res) => {
      if (res.code === 0) {
        const { list, totalCount } = res.data
        const currentPage = params.current_page
        const page = Math.ceil(totalCount / this.queryPanigation.page_size)
        if (list && totalCount && list.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current_page')
        } else {
          this.setState({
            ...res.data,
          });
        }
      } else {
        message.error(res.msg);
      }
    });
  }

  showDetail = (record, title, width, actionType) => {
    const EditComponent = this.editComponent;
    if (typeof EditComponent === 'string') {
      this.props.history.push(this.replaceUrlForId(EditComponent, this.getOpenParam(record)));
    } else if (EditComponent instanceof Object) {
      Modal.open({
        title: title || '编辑',
        width: width ? width : this.model_width ? this.model_width : '1000px',
        content: (
          <EditComponent
            {...this.props}
            record={record}
            closeModal={this.closeModal}
            // dataType={this.state.dataType}
            actionType={actionType}
            oper_type={record.oper_type}
            // treeData={this.state.listsData}
          />
        ),
        isOkBtn: actionType === 'detail' ? true : false,
        isCancelBtn: actionType === 'detail' ? true : false,
        ok: () => {
          Modal.close();
        },
      });
    } else {
      console.log('something error');
    }
  };

  // 表列定义
  getColumns = () => {
    return [
      {
        title: '提交时间',
        key: 'create_time',
        dataIndex: 'create_time',
        ellipsis: true,
        width: 140,
        sorter: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '提交人',
        key: 'create_user_name',
        dataIndex: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '名称',
        width: 120,
        key: 'source_name',
        dataIndex: 'source_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('模块', [...this.props.module_type], 'module_type', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'module_type',
        dataIndex: 'module_type',
        render: (text) => {
          return <CodeLabel code='module_type' value={text} />;
        },
      },
      {
        title: '操作类型',
        key: 'oper_type',
        dataIndex: 'oper_type',

        render: (text) => {
          return <CodeLabel code='oper_type' value={text} />;
        },
        ellipsis: true,
      },
      {
        title: (
          <>
            {this.getFilterTitle('审核情况', [...this.props.audit_status], 'status', this.refreshTableFilter, [
              'key',
              'value',
            ])}
          </>
        ),
        key: 'status',
        dataIndex: 'status',
        width: 120,
        render: (text, record) => {
          return (
            <AuditStatus
              text={<CodeLabel code='audit_status' value={text} />}
              record={{
                audit_status: record.status,
                audit_detail: {
                  submit_time: record.submit_time,
                  submit_user_name: record.submit_user_name,
                  audit_time: record.audit_time,
                  audit_user_name: record.audit_user_name,
                },
              }}
            />
          );
        },
      },
      {
        title: '审核意见',
        key: 'audit_remark',
        dataIndex: 'audit_remark',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '审核人',
        key: 'audit_user_name',
        dataIndex: 'audit_user_name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '审核时间',
        key: 'audit_time',
        dataIndex: 'audit_time',
        width: 140,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };

  closeModal = (onlyClose) => {
    if (onlyClose === true) {
      this.onlyCloseModal();
    } else {
      this.onlyCloseModal();
      this.freshQueryList();
    }
  };
  labDetail = (record) => {
    storage.onlineSourceId = record.source_id;
    this.props.history.push('/strategyLabs');
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['between_start_submit_time', 'between_end_submit_time'],
        placeholder: ['开始时间', '结束时间'],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入名称|审核人进行搜索',
      },
    ];

    return (
      <div>
        <div className='flex flex-start'>
          <div className='flex-right-wp'>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              refresh={this.resetList}
              isOnChange={true}
            />
          </div>
        </div>

        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            onChange={this.handleTableChange}
            edit={this.edit}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
            showDetail={this.showDetail}
            labDetail={this.labDetail}
            // copy={this.copy}
            columns={this.getColumns()}
            rowKey='audit_id'
          />
        </div>
      </div>
    );
  }
}

export default AuditLog;
